<template>
	<view class="container">
		<!-- 搜索作者 -->
		<view class="search">
			<view class="search-input">
				<u-search @search="onSearch" @custom="onSearch" placeholder="请输入作者名称搜索" v-model="keywords"></u-search>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="banner">
			<u-swiper @click="onClickBanner" height="160" :indicator="true" keyName="file_path" :list="banner"></u-swiper>
		</view>
		<!-- 创作者列表 -->
		<view class="author">
			<view class="item" v-for="(item,index) in lists" :key="index">
				<view class="user" @click="onAuthor(item.user_id)">
					<view class="left">
						<view class="avatar">
							<u--image :src="item.avatar.file_path" width="100rpx" height="100rpx" shape="circle">
							</u--image>
						</view>
						<view class="nickName">
							<view class="text">{{ item.nickName }}</view>
							<view class="hot">
								<view class="i">
									<u-icon name="photo"></u-icon>
									<view class="n">{{ item.opus_count }}</view>
								</view>
								<view class="i star">
									<u-icon color="#ff9900" name="star-fill"></u-icon>
									<u-icon color="#ff9900" name="star-fill"></u-icon>
									<u-icon color="#ff9900" name="star-fill"></u-icon>
									<u-icon color="#ff9900" name="star-fill"></u-icon>
									<u-icon color="#ff9900" name="star-fill"></u-icon>
								</view>
							</view>
						</view>
					</view>
					<view class="right">
						<view class="text">查看主页</view>
						<view class="icon">
							<u-icon color="#398ade" name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
				<!-- 推荐红包列表 -->
				<view class="cover" v-if="item.opus.length > 0">
					<view class="image" v-if="i < 3" @click="onSubmitOrder(items.opus_id)" v-for="(items,i) in item.opus" :key="i">
						<u--image height="180" mode="scaleToFill" width="100%" radius="5" :src="items.image.file_path">
						</u--image>
					</view>
				</view>
				<view class="empty" v-else>
					<u-empty mode="data" text="作者太懒,暂无作品~!" icon="http://cdn.uviewui.com/uview/empty/data.png">
					</u-empty>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		author,
		search
	} from '@/api/user.js';
	import {
		jump
	} from '@/api/system.js';
	export default {
		data() {
			return {
				lists: [],
				keywords: '',
				banner: []
			};
		},
		onLoad() {
			this.getAuthor()
			this.getBanner()
		},
		methods: {
			onSearch(real_name) {
				search({
					real_name: real_name
				}).then(res => {
					if (res.code == 1) {
						uni.navigateTo({
							url: '/pages/author/user/index?author_id=' + res.data.author_id
						})
					}
				}).catch(err => {

				})
			},
			onClickBanner(index){
				this.onJump(this.banner[index])
			},
			onJump(item) {
				if (item.type == 10) {
					uni.reLaunch({
						url: item.url
					})
					return false;
				}
				if (item.type == 20) {
					uni.navigateTo({
						url: '/pages/main/webview/index?url=' + item.url
					});
					return false;
				}
				if (item.type == 30) {
					uni.navigateToMiniProgram({
						appId: item.app_id,
						path: item.url,
						success(res) {
							// 打开成功
						}
					});
					return false;
				}
				if (item.type == 40) {
					uni.showToast({
						title: '暂不支持的类型'
					})
					return false;
				}
			},
			getBanner() {
				jump({
					local: 50
				}).then(res => {
					this.banner = res.data.jump
				}).catch(err => {

				})
			},
			onSubmitOrder(opus_id) {
				uni.navigateTo({
					url: '/pages/author/buy/index?opus_id=' + opus_id
				})
			},
			getAuthor() {
				author({}).then(res => {
					this.lists = res.data.author.data
				}).catch(err => {

				})
			},
			onAuthor(author_id) {
				uni.navigateTo({
					url: '/pages/author/user/index?author_id=' + author_id
				})
			}
		}
	}
</script>

<style lang="scss">
	.empty {
		padding-bottom: 60rpx;
	}

	.author {
		width: 94%;
		margin: 0 auto;

		.item {
			background-color: #fff;
			padding: 15rpx;
			border-radius: 10rpx;
			margin-bottom: 15rpx;

			.cover {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin: 20rpx 0rpx;

				.image {
					width: 200rpx;
					border-radius: 15rpx;
					overflow: hidden;
				}
			}

			.user {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.right {
					display: flex;
					flex-direction: row;
					align-items: center;

					.text {
						color: #398ade;
						font-size: 24rpx;
					}
				}

				.left {
					display: flex;
					flex-direction: row;
					align-items: center;

					.avatar {
						margin-right: 15rpx;
					}

					.nickName {
						display: flex;
						flex-direction: column;

						.text {
							font-weight: bolder;
							margin-bottom: 10rpx;
						}

						.hot {
							display: flex;
							flex-direction: row;
							align-items: center;

							.i {
								display: flex;
								flex-direction: row;

								.n {
									font-size: 24rpx;
									color: #606266;
								}
							}

							.star {
								margin-left: 15rpx;
							}
						}
					}
				}
			}
		}
	}

	.banner {
		width: 94%;
		margin: 15rpx auto;
	}

	.search {
		background-color: #fff;
		padding: 15rpx;

		.search-input {
			width: 92%;
			margin: 0 auto;
		}
	}
</style>
